<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script src='./vue.js'></script>
</head>

<body>
    <div id='app'>
        <input type="text" v-foc:bc.focus="color">

        <button @click="color='#f66'">修改颜色 {{color}} </button>
    </div>
</body>
<script>
    const app = {
        data() {
            return {
                color: '#fff'
            }
        },
        methods: {},
        // 自定义指令选项
        directives: {
            // foc 是自定义指令名称，写名称的时候不需要 v- ，在标签中使用可以直接 v-foc 即可
            foc: {
                // 在绑定元素的 attribute 前
                // 或事件监听器应用前调用
                created(el, binding, vnode, prevVnode) {
                    // 下面会介绍各个参数的细节
                    // console.log(binding.modifiers);
                    // if (binding.arg == 'bc') {
                    //     // 具有该指令的时候，内容颜色为红色
                    //     el.style.backgroundColor = binding.value || 'red'
                    // } else {
                    //     el.style.color = binding.value || 'red'
                    // }


                },
                // 在元素被插入到 DOM 前调用
                beforeMount(el, binding, vnode, prevVnode) { },
                // 在绑定元素的父组件
                // 及他自己的所有子节点都挂载完成后调用
                mounted(el, binding, vnode, prevVnode) {
                    if (binding.modifiers.focus) {
                        // 要自动获取焦点
                        el.focus()
                    }
                },
                // 绑定元素的父组件更新前调用
                beforeUpdate(el, binding, vnode, prevVnode) { },
                // 在绑定元素的父组件
                // 及他自己的所有子节点都更新后调用
                updated(el, binding, vnode, prevVnode) {
                    // 一般我们指令中的更新会调用该方法
                    if (binding.arg == 'bc') {
                        // 具有该指令的时候，内容颜色为红色
                        el.style.backgroundColor = binding.value || 'red'
                    } else {
                        el.style.color = binding.value || 'red'
                    }
                },
                // 绑定元素的父组件卸载前调用
                beforeUnmount(el, binding, vnode, prevVnode) { },
                // 绑定元素的父组件卸载后调用
                unmounted(el, binding, vnode, prevVnode) { }
            }
        }
    }
    const vm = Vue.createApp(app).mount('#app')
</script>

</html>